<!--代码表管理主组件-->
<template>
	<div class="app_content app_content_tree">
		<div class="table_qy_tree_left" :style="{height: treeHeight}">
			<div class="tree_qy">
				<el-scrollbar wrap-class="scrollbar-wrapper">
					<el-tree :props="props"
							 :load="loadNode"
							 lazy
							 @node-click="handleNodeClick"
							 default-expand-all>
					</el-tree>
				</el-scrollbar>
			</div>
		</div>
		<div class="table_qy table_qy_tree_right" ref="right">
			<div class="middle lb_title">列表</div>
			<div class="middle cxk_qy" ref="element">
				<!-- 'formInline' 为此el-form 自定义的对象  -->
				<el-form :inline="true" :model="formInlineFl" class="demo-form-inline"  v-show="!see">
					<el-form-item label="代码分类名称">
						<el-input v-model="formInlineFl.dmflmc"  placeholder="代码分类名称" size="mini"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="jcggDmflFindListByPage()" size="mini" class="button_search">查询</el-button>
						<el-button type="info" @click="jcggDmflReset()" size="mini" class="button_reset">重置</el-button>
					</el-form-item>
				</el-form>
				<el-form :inline="true" :model="formInlineX" class="demo-form-inline"  v-show="see">
					<el-form-item label="代码项名称">
						<el-input v-model="formInlineX.dmmc" placeholder="代码项名称" size="mini"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="jcggDmxFindListByPage()" size="mini" class="button_search">查询</el-button>
						<el-button type="info" @click="jcggDmxReset()" size="mini" class="button_reset">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="middle gnan">
				<el-button type="primary" size="mini"  v-show="!see" class="button_search" @click="addDmfl()">新增代码分类</el-button>
				<el-button type="primary" size="mini"   v-show="see" class="button_search" @click="addDmx()">新增代码项</el-button>
			</div>
			<div class="table_padding">
				<div class="table_content">
					<el-table :data="tableDataDmfl"   v-show="!see" stripe border class="table_overflow" :style="{height: scrollerHeight}">
						<el-table-column type="index" label="序号" width="52"></el-table-column>
						<el-table-column prop="dmflmc" label="代码分类名称" width=""></el-table-column>
						<el-table-column prop="sfky" label="是否可用"width="" :formatter="fysfky"></el-table-column>
						<el-table-column prop="pxh" label="排序号" width=""></el-table-column>
						<el-table-column prop="" label="操作" width="120">
							<template slot-scope="scope">           <!-- (scope.row) 为单个行对象 -->
								<el-button size="small" @click="modifyDmfl(scope.row)"  type="text" ><i class="el-icon-edit-outline tb_ys" title="修改"></i></el-button>
								<el-button size="small"  type="text" @click="delDmfl(scope.row)"><i class="el-icon-delete tb_ys" title="删除"></i></el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-table :data="tableDataDmx" v-show="see" stripe border class="table_overflow" :style="{height: scrollerHeight}">
						<el-table-column type="index" label="序号" width="52"></el-table-column>
						<el-table-column prop="dmmc" label="代码名称" width=""></el-table-column>
						<el-table-column prop="dmz" label="代码值" width=""></el-table-column>
						<el-table-column prop="kzzd1" label="扩展字段1" width=""></el-table-column>
						<el-table-column prop="kzzd2" label="扩展字段2" width=""></el-table-column>
						<el-table-column prop="kzzd3" label="扩展字段3" width=""></el-table-column>
						<el-table-column prop="sfky" label="是否可用"width="" :formatter="fysfky"></el-table-column>
						<el-table-column prop="pxh" label="排序号" width=""></el-table-column>
						<el-table-column prop="sjdmid" label="上级id" v-if="false"></el-table-column>
						<el-table-column prop="" label="操作" width="120">
							<template slot-scope="scope">           <!-- (scope.row) 为单个行对象 -->
								<el-button size="small" @click="infoSjdmcx(scope.row)"  type="text" ><i class="el-icon-top tb_ys" title="上级代码查询"></i><!--上级代码查询--></el-button>
								<el-button size="small" @click="infoXjdmcx(scope.row)"  type="text" ><i class="el-icon-bottom tb_ys" title="下级代码查询"></i><!--下级代码查询--></el-button>
								<el-button size="small" @click="infoXzdmcx(scope.row)"  type="text" ><i class="el-icon-circle-plus-outline tb_ys" title="新增下级代码"></i><!--新增下级代码--></el-button>
								<el-button size="small" @click="modifyDmx(scope.row)"  type="text" ><i class="el-icon-edit-outline tb_ys" title="修改"></i></el-button>
								<el-button size="small"  type="text" @click="delDmx(scope.row)"><i class="el-icon-delete tb_ys" title="删除"></i></el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pageIn">
						<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="currentPage"
								:page-sizes="[100, 200, 300, 400]"
								:page-size=pageSize
								layout="total, sizes, prev, pager, next, jumper"
								:total=total>
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<!--代码分类新增组件-->
		<AddDmflDialog ref="addDmflDialog" @jcggDmflFindListByPage="jcggDmflFindListByPage()"></AddDmflDialog>
		<!--代码分类修改组件-->
		<ModifyDmflDialog ref="modifyDmflDialog" @jcggDmflFindListByPage="jcggDmflFindListByPage()"></ModifyDmflDialog>
		<!--代码项新增组件-->
		<AddDmxDialog ref="addDmxDialog" @jcggDmxFindListByPage="jcggDmxFindListByPage()"></AddDmxDialog>
		<!--代码项修改组件-->
		<ModifyDmxDialog ref="modifyDmxDialog" @jcggDmxFindListByPage="jcggDmxFindListByPage()"></ModifyDmxDialog>
		<!--代码项下级代码组件-->
		<AddDmxLowerDialog  ref="addDmxLowerDialog" @jcggDmxFindListByPage="jcggDmxFindListByPage()"></AddDmxLowerDialog>
	</div>
</template>

<script>

	import {jcggDmflFindListByPage,jcggDmflFindList,jcggDmxFindListByPage,jcggDmflDel,jcggDmxDel,jcggDmxFindList} from '@/api/app/xtgl0301/dmbgl.js'
	import AddDmflDialog from './addDmflDialog'
	import ModifyDmflDialog from './modifyDmflDialog'
	import AddDmxDialog from './addDmxDialog'
	import ModifyDmxDialog from './modifyDmxDialog'
	import AddDmxLowerDialog from './addDmxLowerDialog'


	export default {
		data(){
			return{
				//定义属性
				scrollerHeight:"",
				treeHeight:"",
				treeQyHeight:"",
				//代码分类
				formInlineFl: {
					dmflmc: null
				},
				//代码项
				formInlineX: {
					dmmc: null
				},
				treeinput:'',
				tableDataDmfl: [],
				tableDataDmx: [],
				currentPage:1,
				pageSize:10,
				total:null,
				//显示隐藏属性
				see:false,
				//懒树属性
				props: {
					label: 'dmflmc',
					id: 'dmflbs',
					isLeaf: false
				},
				//代码分类标识
				dmflbs:null,
				//上级id
				sjdmid:null,
				//代码分类
				dmfl:{
					dmflbs:'',
					dmflmc:'',
					pxh:'',
					sfky:'',
				},
			}
		},
		mounted() {                             	//页面初始化加载(只在页面初始时加载一次)
			// this.findListByPage()
			// (table高度动态获取)
			let height= this.$refs.element.offsetHeight;
			this.scrollerHeight = (window.innerHeight - height - 240) + 'px';
			this.treeHeight = (window.innerHeight - 109) + 'px';
			this.treeQyHeight = (window.innerHeight - 175) + 'px';
			this.jcggDmflFindListByPage();
		},

		methods:{
			//是否可用
			fysfky(row, column) {
				if (row.sfky === 1) {
					return "是";
				}else{
					return "否";
				}

			},
			//分类树
			loadNode (node, resolve) {
				if (node.level == 0) {				//根目录树
					return resolve([{ dmflmc: '代码树',dmflbs:0 }]);
				}else if(node.level == 1){
					this.loadfirstnode(resolve);
				}else{								//防止树一直持续加载，产生树加载图片
					return resolve([]);
				}
			},
			//二级分类树
			async loadfirstnode (resolve) {
				let data = await jcggDmflFindList();
				this.props = data.data.content;
				resolve(data.data.content);			//递归
			},
			//树节点点击
			async handleNodeClick(data) {

				if(data.dmflbs == 0){				//根目录点击显示代码分类内容
					let parms ={
						dmflmc:this.formInlineFl.dmflmc,
						page:this.currentPage,
						pageSize:this.pageSize
					}
					let data = await jcggDmflFindListByPage(parms)
					this.tableDataDmfl=data.data.content
					this.total = data.data.pageInfo.total
					this.see = false;
				}else{								//点击显示代码项内容
					this.dmflbs = data.dmflbs
					let parms ={
						dmflbs:data.dmflbs,
						sjdmid:null,
						page:this.currentPage,
						pageSize:this.pageSize
					}
					let data1 = await jcggDmxFindListByPage(parms);
					this.tableDataDmx=data1.data.content
					this.total = data1.data.pageInfo.total
					this.see = true;
				}
			},
			//代码分类列表
			async jcggDmflFindListByPage(){
				let parms ={
					dmflmc:this.formInlineFl.dmflmc,
					page:this.currentPage,
					pageSize:this.pageSize
				}
				let data = await jcggDmflFindListByPage(parms)
				this.tableDataDmfl=data.data.content
				this.total = data.data.pageInfo.total
				this.see = false;
			},
			//重置代码分类
			jcggDmflReset(){
				this.formInlineFl.dmflmc = null
				this.jcggDmflFindListByPage();
			},
			//代码项列表
			async jcggDmxFindListByPage(){
				let parms ={
					dmflbs:this.dmflbs,
					dmmc:this.formInlineX.dmmc,
					page:this.currentPage,
					pageSize:this.pageSize
				}
				let data = await jcggDmxFindListByPage(parms)
				this.tableDataDmx=data.data.content
				this.total = data.data.pageInfo.total
				this.see = true;
			},
			//重置代码项
			jcggDmxReset(){
				this.formInlineX.dmmc = null
				this.jcggDmxFindListByPage();
			},
			//修改代码分类
			modifyDmfl(row){
				this.$refs['modifyDmflDialog'].dmfl.dmflbs = row.dmflbs
				this.$refs['modifyDmflDialog'].dmfl.dmflmc = row.dmflmc
				this.$refs['modifyDmflDialog'].dmfl.pxh = row.pxh
				this.$refs['modifyDmflDialog'].dmfl.sfky = row.sfky.toString()
				this.$refs['modifyDmflDialog'].show()
			},
			//修改代码项
			modifyDmx(row){
				this.$refs['modifyDmxDialog'].dmx.dmmc = row.dmmc
				this.$refs['modifyDmxDialog'].dmx.dmz = row.dmz
				this.$refs['modifyDmxDialog'].dmx.pxh = row.pxh
				this.$refs['modifyDmxDialog'].dmx.sfky = row.sfky.toString()
				this.$refs['modifyDmxDialog'].dmx.kzzd1 = row.kzzd1
				this.$refs['modifyDmxDialog'].dmx.kzzd2 = row.kzzd2
				this.$refs['modifyDmxDialog'].dmx.kzzd3 = row.kzzd3
				this.$refs['modifyDmxDialog'].dmid = row.dmid
				this.$refs['modifyDmxDialog'].show()                           //弹窗显示
			},
			//新增代码分类
			addDmfl(){
				this.$refs['addDmflDialog'].show()
			},
			//新增代码项
			addDmx(){
				this.$refs['addDmxDialog'].dmflbs = this.dmflbs,
				this.$refs['addDmxDialog'].sjdmid = this.sjdmid,
				this.$refs['addDmxDialog'].show()
			},
			//删除代码分类
			delDmfl(row){
				this.$confirm('确认要删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					let parms ={
						dmflbs:row.dmflbs
					}
					let data = await jcggDmflDel(parms);

					if(data.code==200){
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.jcggDmflFindListByPage()
					}else{
						this.$message({
							type: 'danger',
							message: '操作失败'
						});
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//删除代码项
			delDmx(row){
				this.$confirm('确认要删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					let parms ={
						dmid:row.dmid
					}
					let data = await jcggDmxDel(parms);
					if(data.code==200){
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.jcggDmxFindListByPage()
					}else{
						this.$message({
							type: 'danger',
							message: '操作失败'
						});
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//上级代码查询
			async infoSjdmcx(row){
				if(row.sjdmid==null){
					this.open()
				}else{
					let parms ={                    //axios(ajax) 请求参数
						dmid:row.sjdmid
					}
					let data = await jcggDmxFindList(parms);
					this.tableDataDmx=data.data.content
					this.total=1;
					this.see = true;
				}
			},
			//下级代码查询
			async infoXjdmcx(row){
				this.sjdmid = row.dmid
				this.dmflbs = row.dmflbs
				let parms ={                    //axios(ajax) 请求参数
					dmflbs:row.dmflbs,
					sjdmid:row.dmid,
					page:this.currentPage,
					pageSize:this.pageSize
				}
				let data = await jcggDmxFindListByPage(parms);
				this.tableDataDmx=data.data.content
				this.total = data.data.pageInfo.total
				this.see = true;
			},
			//新增下级代码
			infoXzdmcx(row){
				console.log(row)
				this.$refs['addDmxLowerDialog'].sjdmid = row.dmid
				this.$refs['addDmxLowerDialog'].sjdmmc = row.dmmc
				this.$refs['addDmxLowerDialog'].sjdmz = row.dmz
				this.$refs['addDmxLowerDialog'].dmflbs = row.dmflbs
				this.$refs['addDmxLowerDialog'].show()
			},
			//提示消息
			open(){
				this.$notify.info({
					title: '消息',
					message: '无上级代码'
				});
			},

			handleSizeChange(val) {                                               //分页
				// console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {                                            //分页
				this.currentPage = val
				// console.log(`当前页: ${val}`);
			},
		},
		components: {
			AddDmflDialog,
			ModifyDmflDialog,
			AddDmxDialog,
			ModifyDmxDialog,
			AddDmxLowerDialog
		},
	}
</script>

<style >
	@import "../../../../styles/app0301.scss";
</style>